import React, { useState } from 'react';
import { useUser } from '@contexts/UserContext';
import { formatTimestamp } from '@utils/time';
import './styles.scss';
import FilePreviews from '@components/ChatArea/FilePreviews';
import FormattedText from '@components/FormattedText';

/**
 * MessageBubble 组件
 * 用于显示单条消息，支持 Markdown 格式和代码高亮
 * 
 * @param {Object} props
 * @param {Object} props.message - 消息对象
 * @param {string} props.message.id - 消息ID
 * @param {string} props.message.role - 消息角色（user/assistant）
 * @param {string} props.message.content - 消息内容
 * @param {number} props.message.timestamp - 消息时间戳
 * @param {string} props.message.avatar - 头像URL
 * @param {string} props.message.name - 发送者名称
 * @param {Function} props.onCopy - 复制消息内容的回调函数
 * @param {Function} props.onRegenerate - 重新生成消息的回调函数
 * @param {Function} props.onDelete - 删除消息的回调函数
 */
const MessageBubble = ({ message, getFileIcon, 
    handleUserMessageEdit, handleUserMessageCopy, handleUserMessageShare, handleUserMessageMore, 
    handleAssistantMessageVoice, handleAssistantMessageCopy, handleAssistantMessageRegenerate, handleAssistantMessageShare, handleAssistantMessageMore, handleAssistantMessageLike, handleAssistantMessageDislike }) => {
    // 状态管理
    const [showActions, setShowActions] = useState(true);
    const { user } = useUser();

    // 处理鼠标悬停
    const handleMouseEnter = () => {
        setShowActions(true);
    };
    const handleMouseLeave = () => {
        setShowActions(false);
    };



    return (
        <div
            className={`message-container message-container--${message.role}`}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >



            {/* 头像 */}
            {message.role === 'user' ? (
                <>

                    {/* 消息内容 */}
                    <div className={`message-content message-content--${message.role}`}>
                        {/* 消息头部 */}
                        <div className="message-header">
                            <span>{message.name}</span>
                            <span>{message.timestamp}</span>
                        </div>
                        {/* 消息文件 */}
                        {message.files && message.files.length > 0 && (
                            <FilePreviews files={message.files} getFileIcon={getFileIcon} canRemove={false} />
                        )}
                        {/* 消息气泡 */}
                        {message.content && (

                            <div className={`message-bubble message-bubble--${message.role}`}>
                                {/* 消息内容 */}
                                <div className="formatted-text">
                                    <FormattedText content={message.content} />
                                </div>


                                {/* 消息操作 */}
                                <div className="bubble-actions" style={{ opacity: showActions ? 1 : 0 }}>
                                    <button className="action-button" onClick={() => handleUserMessageEdit(message.id)} title="编辑">
                                        <i className="ri-edit-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleUserMessageCopy(message.id)} title="复制">
                                        <i className="ri-file-copy-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleUserMessageShare(message.id)} title="分享">
                                        <i className="ri-share-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleUserMessageMore(message.id)} title="更多">
                                        <i className="ri-more-line" />
                                    </button>
                                </div>
                            </div>)}
                    </div>
                    < img
                        src={user?.avatarUrl}
                        alt={message.name}
                        className={`message-avatar`}
                    />
                </>
            ) : (
                <>
                    < img
                        src={message.avatar}
                        alt={message.name}
                        className={`message-avatar message-avatar--small`}
                    />

                    {/* 消息内容 */}
                    <div className={`message-content message-content--${message.role}`}>
                        {/* 消息头部 */}
                        <div className="message-header">
                            <span>{message.name}</span>
                            <span style={{ color: "#86909C" }}>{message.timestamp}</span>
                        </div>

                        {/* 消息气泡 */}
                        <div className={`message-bubble message-bubble--${message.role}`}>
                            <div className="formatted-text">
                                <FormattedText content={message.content} />
                            </div>

                            {/* 消息操作 */}
                            {/* {showActions && ( */}
                            <div className="message-actions" style={{ opacity: showActions ? 1 : 0 }}>
                                <div className="action-group">
                                    <button className="action-button" onClick={() => handleAssistantMessageVoice(message.id)} title="语音播放">
                                        <i className="ri-volume-up-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleAssistantMessageCopy(message.id)} title="复制">
                                        <i className="ri-file-copy-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleAssistantMessageRegenerate(message.id)} title="重新生成">
                                        <i className="ri-refresh-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleAssistantMessageShare(message.id)} title="分享">
                                        <i className="ri-share-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleAssistantMessageMore(message.id)} title="更多">
                                        <i className="ri-more-line" />
                                    </button>
                                </div>
                                <div className="action-group">
                                    <button className="action-button" onClick={() => handleAssistantMessageLike(message.id)} title="点赞">
                                        <i className="ri-thumb-up-line" />
                                    </button>
                                    <button className="action-button" onClick={() => handleAssistantMessageDislike(message.id)} title="点踩">
                                        <i className="ri-thumb-down-line" />
                                    </button>
                                </div>
                            </div>
                            {/* )} */}

                        </div>
                    </div></>
            )}
        </div>
    );
};

export default MessageBubble; 